<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				loading加载状态
			</div>
			<div class="sub-title quote">
				由于这是一个API组件，应使用API的方式来调用
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">提示文字及黑色遮罩</div>
			<code-view>
				<template slot="code-js">{{ jsCode3 }}</template>
			</code-view>
			
			<div class="example-title">loading方法的参数</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="190">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="160">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="100">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			<p></p>
			<div class="alert">
				<p class="alert">说明</p>
				<p>loading函数会返回组件本身，然后可以调用<span class="danger">close</span>方法对loading进行关闭</p>
				<code-view>
					<template slot="code-js">{{ jsCode4 }}</template>
				</code-view>
			</div>	
			<br>
			<br>
			<br>
			<br>
			<br>
		</div>
		
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/loadingdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
				jsCode1: `import {Loading} from 'gabriel-ui'
Vue.use(Loading)
//当Loading组件被引入时，会自动在Vue的原型上添加$loading方法
//相当于 Vue.prototype.$loading = fn(){ ... }`,
				htmlCode2: `<gr-button @click="open">加载</gr-button>`,
				jsCode2: `export default {
	methods: {
		open() {
			const cLoading = this.$loading();
			setTimeout(()=>{
				cLoading.close();
			}, 2000)
		}
	}
}`,
				jsCode3: `this.$loading({ 
	text: '加载中呢',
	dark: true
});`,
				jsCode4: `const cLoading = this.$loading();
setTimeout(()=>{
	cLoading.close();
}, 2000)`,
				propertiesExplain: [
					{
						attrName: 'text',
						introduce: `提示文字`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'dark',
						introduce: `是否为黑色遮罩层`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					}
				]
				
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.doc-content {
		width: 1000px;
		.icon-list {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.icon-view {
				width: 15%;
				padding: 2px;
				margin-top: 25px;
				-webkit-user-select: none;
				text-align: center;
				font-size: 14px;
				color: #666;
			}
		}
	}
</style>
